<!--  -->
<template>
    <div class='index-main' v-if="!isUploading">
        <div class="index-top">
            <div class="index-top__img">
                <img class="index-top__img__justify" src="../../../assets/img/pluto-feminism-fatal-error.svg">
            </div>
            <div class="index-top__word">
                <div class="index-top__word_text">高效、智能、卓越</div>
                <div class="index-top__word_bg"></div>
            </div>
        </div>
        <div class="index-main_mid" @click="uploadmethod">
            <div class="mid__plusX"></div>
            <div class="mid__plusY"></div>
        </div>
    </div>
    <stuploadprove v-else @closeupload="closeupload"></stuploadprove>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import stuploadprove from './STUploadProve'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    stuploadprove
  },
  data () {
    // 这里存放数据
    return {
      isUploading: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    uploadmethod () {
      this.isUploading = true
    },
    closeupload () {
      this.isUploading = false
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
    .index-main {
        width: 100%;
        height: 100%;
        background-color: #fff;
        // overflow: hidden;
    }
    .index-top {
        border-top: px2rem(1) solid transparent;
        .index-top__img {
            margin: px2rem(13) auto 0;
            text-align: center;
            // border: px2rem(2) solid red;
            .index-top__img__justify {
                width: px2rem(201);
                height: px2rem(154);
            }
        }
    }
    .index-top__word {
        // border: px2rem(1) solid blue;
        height: px2rem(42);
        position: relative;
        .index-top__word_text {
            font-family: PingFang SC;
            position: relative;
            z-index: 2;
            text-align: center;
            line-height: px2rem(42);
            font-size: px2rem(30);
            color: #000;
            font-weight: 800;
        }
        .index-top__word_bg {
            height: px2rem(15);
            width: px2rem(179);
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* 标准的语法 */
        }
    }
    .index-main_mid {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: px2rem(140);
        height: px2rem(140);
        margin: px2rem(75) auto 0;
        border-radius: 50%;
        background: -webkit-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom,#9CDAF9,#965EE8);
        box-shadow: 0 0 px2rem(3) px2rem(1) #d5c8f6;
        .mid__plusX {
            position: absolute;
            z-index: 1;
            width: px2rem(41);
            height: px2rem(3);
            background-color: #fff;
        }
        .mid__plusY {
            position: absolute;
            z-index: 2;
            width: px2rem(3);
            height: px2rem(41);
            background-color: #fff;
        }
    }

</style>
